<template>
  <div class="sign">
    <p class="title">添加用户</p>
    <div class="message">{{ message }}</div>
    <el-form label-position="right" label-width="120px" class="form">
      <el-form-item label="账号">
        <el-input type="text" v-model="user.account" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input type="text" v-model="user.email" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input type="text" v-model="user.tel" />
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input type="password" v-model="user.password" />
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" v-model="user.confirm" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="signUp">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ElForm,ElFormItem,ElInput, ElRow, ElCol, ElButton} from 'element-plus';

export default {
  name: 'AddView',
  data(){
    return {
      user: {
        account: '',
        email:'',
        tel: '',
        password: '',
        confirm: ''
      },
      message: ''
    }
  },
  methods: {
    signUp(){
      console.log( 'user: ' , this.user );
      if( this.validate() ) {
        const x = {
          account: this.user.account,
          email: this.user.email,
          tel: this.user.tel,
          password: this.user.password
        }
        // 这里的 `/back` 是在 `vite.config.js` 中配置的前缀
        fetch( '/back/user/add' , {
          method: 'PUT',
          headers: { 
            'content-type': 'application/json' ,
            'authorization': `Bearer ${sessionStorage.getItem( 'token' )}`
          },
          body: JSON.stringify( x )
        }).then( resp => { 
          // 调用 resposne 的 json 方法从 响应对象 中获取数据
          return resp.json(); 
        }).then( data => {
          // 2101 是后端的 constant/user.js 约定的操作编码
          if( data.code == 2101 ) {
            // 编程式导航
            this.$router.push( { name: 'list' } );
            return ; // 让当前函数结束以避免执行该函数中后续的代码
          }
          this.message = data.desc ;
        }).catch( cause => {
          console.log( cause );
        });
      }
    },
    validate(){
      // 解构赋值
      let { account , email , tel , password , confirm } = this.user ;
      // 若 account 的取值是 空字符串 则 !account 就是 true
      // 判断 account 、email 、tel 是否皆为 空字符串
      if( !account && !email && !tel ) {
        this.message = '你至少需要填写账号、邮箱、手机号其中的一项' ;
        return false ;
      }

      if( !password ){
        this.message = '你必须填写登录时使用的密码' ;
        return false ;
      }

      if( password != confirm) {
        this.message = '两次输入密码不一致' ;
        return false ;
      }

      // 清除页面上的提示信息
      this.message = '';
      // 校验通过，返回true
      return true;
    }
  },
  components: { ElForm,ElFormItem,ElInput, ElRow, ElCol, ElButton}
}
</script>

<style scoped>
.sign {
  margin: 25px auto;
  border: 1px solid transparent;
  box-shadow: 0 0 30px -10px gold;
  width: 60vw;
}
.title {
  margin: 10px;
  text-align: center;
  font-size: 30px;
}
.form {
  margin-right: 25px;
}
.message {
  margin: 10px;
  text-align: center;
}
</style>